<template>
	<div>
		<n-space>
			<n-button type="primary" @click="showImport">
				<template #icon>
					<n-icon>
						<icon-document />
					</n-icon>
				</template>
				导入题库
			</n-button>
		</n-space>
		<n-button v-if="showImportRef.tableData.length > 0" class="save" type="success" @click="save">保存</n-button>
		<ol type="1">
			<Item
				v-for="(item, index) in showImportRef.tableData"
				:key="index"
				:item="item"></Item>
		</ol>
		<n-modal
			style="width: 500px;"
			v-model:show="showImportRef.value"
			title="导入题库"
			preset="card"
			draggable>
			<n-space vertical>
				<pre>
由于图片识别价格昂贵，目前系统只能上传json文件,
如果你的题库是图片，请自行整理为json格式后上传。
如果困难请<a
	href="/question/help"
	target="_blank">参考文档</a>。
				</pre>
				<wy-upload accept=".json" :changeFile="file => { api.changeFile(file, showImportRef) }" />
			</n-space>
		</n-modal>
	</div>
</template>
<script setup>
import { ref, reactive } from 'vue'
import WyUpload from '@@/upload'
import api from '@/data/question'
import IconDocument from '@@/icons/plus'
import { useMessage, useDialog } from 'naive-ui'
import Item from '../components/item'
const message = useMessage()
const dialog = useDialog()
const showImportRef = reactive({
	value: false,
	tableData: []
})
function showImport () {
	showImportRef.value = true
}
function save () {
	dialog.warning({
		title: '导入',
		content: '确定要将所有数据导入吗？',
		positiveText: '确定',
		negativeText: '取消',
		draggable: true,
		onPositiveClick: () => {
			api.importFile({ content: JSON.stringify(showImportRef.tableData) }, showImportRef)
		}
	})
}
</script>
<style scoped lang="scss">
.save, .n-data-table {
	margin-top: 8px;
} 
</style>